<template>


  <nav>
    <div class="a"><span v-for="i in props.item" @click="Go(i.left,i.name)"><router-link :to="i.path">{{
        i.name
      }}</router-link></span>
    </div>
    <div class="active" :style="obj">{{ Text }}</div>
  </nav>


</template>

<script setup>
import {defineProps, reactive, ref} from "vue"

const props = defineProps(["item", 'width'])
const obj = reactive({
  left: '0',
  width: props.width + '%'
})
const Text = ref(props.item[0].name + '')
const Go = (left, name) => {
  obj.left = left + '%'
  Text.value = name
}
</script>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

nav {
  position: relative;
  height: 100%;
  font-weight: 400;
  font-size: 12px;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 6px 16px;
  box-shadow: 0 6px 16px #0000003f;

}

.a {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 60px;

  span {
    display: block;
    flex: 1;
    width: auto;

    a {
      width: 100%;
      display: flex;
      background-color: transparent;
      color: black;
      align-items: center;
      justify-content: center;
      height: 60px;

    }

  }

}


nav .active {
  position: absolute;
  background: linear-gradient(45deg, #06ace0 0%, #8600e6 100%);
  top: 15px;
  transform: translateX(50%);
  border-radius: 15px;
  transition: 0.6s cubic-bezier(0.6, -0.6, 0.26, 1.6);
  text-align: center;
  line-height: 30px;
  height: 30px;
  color: #ffffff;
}
</style>